@import 'src/shared/styles/global'

.cardContainer
  border-radius: 10px
  padding: 20px
  display: flex
  flex-direction: column
  align-items: center
  gap: 10px
  background-color: $primary-blue-dark
  width: 375px
  height: 475px

.cardInfo
  display: flex
  flex-direction: column
  align-items: center
  gap: 5px
  width: 320px
  height: 180px
  background: linear-gradient(90deg, #9C2CF3 0%, #3A6FF9 100%)
  border-radius: 10px
  padding: 30px

.balance
  font-size: 24px
  font-weight: bold

.cardNumber
  font-size: 14px

.issueDate
  font-size: 14px

.buttonsContainer
  display: flex
  gap: 10px

.manageButton, .transferButton
  border: none
  width: 180px
  height: 40px
  background: $main-blue-dark
  border-radius: 10px
  color: $white
  cursor: pointer
  font-size: 14px
  //@mixin flex-center
  font-weight: bold

//.manageButton:hover, .transferButton:hover
//
